<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>:focus</title>
		<style>
			div:focus {
				background-color: #00FFFF;
			}
		</style>
	</head>
	<body>
		<h2>:focus 简介</h2>
		<h4>处于焦点状态，例如高亮textarea</h4>
		<h4>一个界面同时仅有一个:focus</h4>
		<h4>并非可以作用所有元素，如下</h4>
		<dl>
			<dd>非disabled的表单元素</dd>
			<dd>包含href的a标签</dd>
			<dd>area 但生效的css有限</dd>
			<dd>HTML5 的summary标签</dd>
			<dd>设置了<b>contenteditable或者tabindex</b>的普通元素</dd>
		</dl>
		<hr>
		<div tabindex="-1">普通元素tabindex为-1，可以响应:focus样式，不能被键盘访问</div>
		<div tabindex="0">普通元素tabindex为0，皆允</div>
		<hr>
		<h2>:focus与outline</h2>
		<h4>任何时候不要有下面这种想法，<b style="color: red;">别特么瞎搞</b></h4>
		<h4>这会导致键盘直接歇逼</h4>
		<h4>由于:focus与键盘访问关联，按钮最好使用button标签，不要使用div或者span</h4>
		<h4>万不得已，建议使用label,且不要忘了高亮，如果需要键盘访问，不要使用visibility或者display:none隐藏</h4>
		<pre>* {
			
  outline: none;

}</pre>
	</body>
</html>
